<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
		  <view class="logoView">
			<!-- logo -->
			<view class="logo">
				小U商城
			</view>
		  </view>
		  <view class="inputView">
			<input class="textinput" style="center" type="text"   placeholder="寻找商品"/>
		  </view>
		</view>
		
		<!-- 顶部导航  scroll-view -->
		<view class="tabs">
		    <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
		        <view class="uni-tab-item"  data-current="0"  
				v-for="(item,index) in tabList" 
				:key="item.id" 
				@click="tabClick(index)"
				>
		            <text class="uni-tab-item-title" :class="tabIndex==index?'uni-tab-item-title-active':''">
						{{item.catename}}
					</text>
					
		        </view>
				
		    </scroll-view> 
		</view>
		<!-- 推荐轮播图 -->
		<view class="">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="item.id">
					<view class="swiper-item">
						<image :src="item.img | getImage" mode="" @click="preview"></image>
					</view>
				</swiper-item>

				
			</swiper>
		</view>
		
		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
		  <view class="FunctNavLi">
			<image src="../../static/index/xiaohuoban.png" alt class="FunImg" />
			<p>限时抢购</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/jifentixicopy.png" alt class="FunImg" />
		  			<p>积分商城</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/lianxiwomen.png" alt class="FunImg" />
		  			<p>联系我们</p>
		  </view>
		  <view class="FunctNavLi"  @click="toClassify">
		  			<image src="../../static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
		  			<p>限时抢购</p>
		  </view>
		</view>
		
		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
				  <image class="LimitedImg" src="../../static/index/xianshi.jpg" alt />
				  <label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
				  <label class="LimitTime">{{time.hour}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{time.minute}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{time.second}}</label>
				  <label class="Seckill">秒杀</label>
				</view>
				<image src="../../static/index/goods2.jpg" class="LimitedgoodsImg" alt="">
			</view>
			
			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>		
					<!-- <div> -->
					<view class="Cloth">
						<image  src="../../static/index/goods1.jpg" alt="">
					</view>
					
					<!-- </div> -->				
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		  <!-- 轮播图2 -->
		<div class="Swiper2">
		  <image class="Swiper2Img" src="../../static/index/swiper1.jpg" alt />
		</div>
		
		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view class="tag_list" :class="activeIndex==0?'active_tag_list':''" @click="switchTab(0)">
					<label for="">热门推荐</label>
				</view>
				<view class="tag_list" :class="activeIndex==1?'active_tag_list':''"  @click="switchTab(1)">
					<label for="">发现好货</label>
				</view>
				<view class="tag_list" :class="activeIndex==2?'active_tag_list':''"  @click="switchTab(2)">
					<label for="">只看专场</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product" v-if="goodsList.length>0">
				<view class="product" v-for="(item,index) in goodsList[activeIndex].content" :key="item.id" @click="toDetail(item.id)">
					<view class="GoodsLeft">
						<image class="GoodsImg" :src="item.img|getImage" alt />
					</view>
					<view class="GoodsCont">
						<view class="GoodConTit">{{item.goodsname}}</view>
						<view class="GoodsPrice">￥{{item.price}}</view>
						<!-- <view class="yimai">已售8000件</view> -->
						<view class="Immed">立即抢购</view>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabList:[],				//tab栏目列表
				tabIndex:0,				//tab栏选中下标
				bannerList:[],			//轮播图
				time:{hour:"00",minute:"00",second:"00"},
				goodsList:[],			//商品列表
				activeIndex:0,			//商品列表，默认选中的下标
			}
		},
		onLoad(){
			//发送网络请求
			this.getTabList()
			
			//获取banner图片
			this.getBanner()
			
			//获取秒杀
			this.getSecKill()
			
			//获取首页商品列表
			this.getIndexGoods()
			
			
			
		},
		methods:{
			toDetail(id){
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			},
			//点击商品列表上面的tab
			switchTab(index){
				this.activeIndex=index
			},
			//获取首页商品列表
			async getIndexGoods(){
				let result =await this.$http({url:"api/getindexgoods"}).catch(err=>{
					console.log(err);
				})
				// console.log(result);
				this.goodsList=result.data.list
			},
			//跳转分类页面
			toClassify(){
				uni.navigateTo({
					url:"/pages/classify/classify"
				})
			},
			
			//获取限时秒杀数据
			async getSecKill(){
				let result =await this.$http({url:"api/getseckill"}).catch(err=>{
					console.error(err)
				})
				// console.log(result);
				let endtime=result.data.list[0].endtime;		//结束时间(毫秒)
				
				
				this.getDuration(endtime)
				
				setInterval(()=>{
					this.getDuration(endtime)
					
				},1000)
				
	
			},
			//获取倒计时
			getDuration(endtime){
				let nowtime=new Date().getTime()				//当前时间（毫秒）
				let duration=Math.floor((endtime-nowtime)/1000)   //时间段（秒）
				let hour=Math.floor(duration/3600)     //小时
				let minute= Math.floor(duration%3600/60)       //分钟 
				let second =duration%60					//秒
				
				hour=hour<=9?"0"+hour:hour 
				minute=minute<=9?"0"+minute:minute
				second=second<=9?"0"+second:second
				
				this.time={hour,minute,second}
			},
			//获取banner图片
			async getBanner(){
				let result =await this.$http({url:"api/getbanner"}).catch(err=>{
					console.error(err)
				})
				// console.log(result);
				this.bannerList=result.data.list;
			},
			async getTabList(){
				let result =await  this.$http({url:"api/getcate"}).catch(err=>{
					console.error(err)
				})
				// console.log(result);
				this.tabList=result.data.list;
			},
			tabClick(index){
				this.tabIndex=index;
			}
		}
		
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>